import React from 'react';
import { Service } from '@/types/service';
import { cn } from '@/utils/styles';

type ServiceCardProps = Service & {
  className?: string;
  onClick?: () => void;
};

const ServiceCard: React.FC<ServiceCardProps> = ({
  title,
  description,
  isOfficial,
  icon,
  className,
  onClick,
}) => {
  return (
    <div
      className={cn(
        "flex items-center p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-sm mb-3 hover:bg-white hover:shadow-md transition-all duration-200",
        onClick && "cursor-pointer",
        className
      )}
      onClick={onClick}
    >
      <div className="w-12 h-12 bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl flex items-center justify-center mr-4">
        <span className="text-2xl">{icon}</span>
      </div>
      <div className="flex-1">
        <div className="flex items-center">
          <h3 className="text-lg font-medium text-gray-800 tracking-tight">{title}</h3>
          {isOfficial && (
            <span className="ml-2 text-sm font-medium text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">
              官方
            </span>
          )}
        </div>
        <p className="text-gray-600 text-sm mt-1 leading-relaxed">{description}</p>
      </div>
    </div>
  );
};

export default ServiceCard;